<template>
  <div>
    <Header ></Header>
    <!--End Menu End-->
    <div class="i_bg">
      <div class="content mar_20">
        <img src="/static/images/img1.jpg" />
      </div>

      <!--Begin 第一步：查看购物车 Begin -->
      <div class="content mar_20">
        <table border="0" class="car_tab" style="width:1200px; margin-bottom:50px;" cellspacing="0" cellpadding="0">
          <tr>
            <td class="car_th" width="490">商品名称</td>
            <td class="car_th" width="150">购买数量</td>
            <td class="car_th" width="130">小计</td>
            <td class="car_th" width="140">返还积分</td>
            <td class="car_th" width="150">操作</td>
          </tr>
          <tr v-for="x in list">
            <td>
              <div class="c_s_img"><img :src="x.goodsImg" width="73" height="73" /></div>
              {{x.goodsName}}
            </td>
            <td align="center">
              <div class="c_num">
                <input type="button" value="" @click="minuNumber(x)"  class="car_btn_1" />
                <input type="text" value="1" name="" class="car_ipt" v-model="x.number" />
                <input type="button" value=""  @click="addNumber(x)" class="car_btn_2" />
              </div>
            </td>
            <td align="center" style="color:#ff4e00;">{{x.money}}</td>
            <td align="center">26R</td>
            <td align="center"><a @click="delBuyCar(x)" >删除</a>&nbsp; &nbsp;<a href="#">加入收藏</a></td>
          </tr>
          <tr height="70">
            <td colspan="6" style="font-family:'Microsoft YaHei'; border-bottom:0;">
              <span class="fr">商品总价：<b style="font-size:22px; color:#ff4e00;">￥{{totalPrice}}</b></span>
            </td>
          </tr>
          <tr valign="top" height="150">
            <td colspan="6" align="right">
              <a href="#"><img src="/static/images/buy1.gif" /></a>&nbsp; &nbsp; <a href="javascript:void(0)" ><img src="/static/images/buy2.gif" /></a>
            </td>
          </tr>
        </table>

      </div>
    </div>
    <!--End 第一步：查看购物车 End-->
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "../common/Header";
  import Footer from "../common/Footer";
  export default {
    name: "BuyCar",
    components:{
      Header,
      Footer
    },
    data(){
      return{
        list:[],//购物车数据列表
        totalPrice:0//总金额
      }
    },
    methods:{
      loadBuyCar(){//加载我的购物车
        const self = this;
        //创建添加购物车请求对象
        const http= this.$http.get("/server-buy-car/buyCar/car");
        //创建请求回调函数
        http.then(function (rs) {
          console.log(rs.data)
          if(rs.data.code==200){
            self.list = rs.data.data.itemList;
            self.totalPrice = rs.data.data.totalPrice;
          }
        })
      },
      delBuyCar(x){//删除购物车的一条数据
        const self = this;
        //创建添加购物车请求对象
        const http= this.$http.delete("/server-buy-car/buyCar/car",{params:x});
        //创建请求回调函数
        http.then(function (rs) {
          console.log(rs.data);
          if(rs.data.code==200){
             self.$alert(rs.data.msg);
             //加载购物车
             self.loadBuyCar();
          }
        })
      },
      addNumber(x){//递增
        console.log(x)
        //递增商品数量
        x.number++;
        this.countTotal(x);
      },
      minuNumber(x){//递减
        x.number--;
        if(x.number<=1){
          x.number=1;
        }
        this.countTotal(x);
      },
      countTotal(x){//计算总价和小计
        //计算小计
        x.money=x.number*x.goodsPrice;
        //计算总价
        let price=0;
        for(var i=0;i<this.list.length;i++){
          price +=this.list[i].number*this.list[i].goodsPrice;
        }
        this.totalPrice = price;
        //调用修改购物车
        this.updateBuyCar();
      },
      updateBuyCar(){//修改购物车
        const self = this;
        //创建请求对象
        const http= this.$http.put("/server-buy-car/buyCar/car",{"itemList":this.list});
        //创建请求回调函数
        http.then(function (rs) {
          console.log(rs.data);
        })

      }

    },
    mounted() {
      this.loadBuyCar();
    }
  }
</script>

<style scoped>

</style>
